<template>
	<view class="water-order-detail full box relative bg-primary flex-col" :style="statusBarHeightStyle">
		<view class="header-wrap">
			<image class="header-mask"
				src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032318237fe4a6330.png"
				mode="aspectFill"></image>
			<view class="navbar-wrap">
				<view class="nav-title">
					<text>详情</text>
				</view>
			</view>
		</view>
		<view class="w-wrap scroll-wrap">
			<view class="w-inner">
				<scroll-view scroll-y="true" class="full scroll-inner">
					<view class="order-box">
						<view class="order-title">
							<text>XX水费单</text>
						</view>
						<view class="desc-item">
							<text>售水机编号：128365</text>
						</view>
						<view class="desc-item">
							<text>户主：测试</text>
						</view>
						<view class="line-box">
							<view class="line-circle left"></view>
							<view class="line-circle right"></view>
						</view>
						<view class="details-warp">
							<view class="details-title">
								<text>账单详情</text>
							</view>
							<view class="detail-item">
								<text class="item-label">本期时间:</text>
								<text class="item-value">20250501-20250531</text>
							</view>
							<view class="detail-item">
								<text class="item-label">本期直饮水总用水量:</text>
								<text class="item-value">167.57升</text>
							</view>
							<view class="detail-item">
								<text class="item-label">活动赠送用水量:</text>
								<text class="item-value">505.00升</text>
							</view>
							<view class="detail-item">
								<text class="item-label">综合直饮水水费合计:</text>
								<text class="item-value">￥0.00</text>
							</view>
							<view class="detail-item">
								<text class="item-label">相当于售水站水桶(7.5L):</text>
								<text class="item-value">22桶</text>
							</view>
							<view class="detail-item">
								<text class="item-label">拦截杂质有害物质:</text>
								<text class="item-value">19.8g</text>
							</view>
							<view class="detail-remark">
								<text>根据每次用水的净化前后TDS测算</text>
							</view>
						</view>
					</view>
					<view class="chart-wrap">
						<view class="chart-title">
							<text>每日用水习惯</text>
						</view>
						<view class="chart-sub-title">
							<text>根据每天每小时的用水量，说明用户每天的用水习惯</text>
						</view>
						<view class="chart-box">
							<qiun-data-charts :ontouch="true" type="line" :opts="opts" :chartData="chartData" />
						</view>
					</view>
					<view class="activity-box">
						<view class="activity-title">
							<text>推荐活动赠送详情</text>
						</view>
						<view class="activity-list">
							<view class="activity-item">
								<view class="item-top">
									<text>活动名称</text>
								</view>
								<view class="item-center">
									<text>节约用水免单</text>
								</view>
								<view class="item-bottom">
									<text>推荐赠送</text>
								</view>
							</view>
							<view class="activity-item is-center">
								<view class="item-top">
									<text>流量</text>
								</view>
								<view class="item-center">
									<text>5L</text>
								</view>
								<view class="item-bottom">
									<text>5L</text>
								</view>
							</view>
							<view class="activity-item">
								<view class="item-top">
									<text>生成时间</text>
								</view>
								<view class="item-center small-text">
									<text>2025-05-22 09:48:38</text>
								</view>
								<view class="item-bottom small-text">
									<text>2025-05-14 10:32:57</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/mixins/mixin.js"
	export default {
		mixins: [mixins],
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#1890FF"],
					enableScroll: true,
					padding: null,
					dataLabel: false,
					dataPointShape: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 6,
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							unit: 'L',
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom"
						}
					}
				}
			}
		},
		onLoad() {
			this.getServerData()
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2018", "2019", "2020",
							"2021", "2022", "2023"
						],
						series: [{
							name: "用水量",
							data: [15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.water-order-detail {
		.scroll-wrap {
			margin-top: -168rpx;
			position: relative;
			box-sizing: border-box;

			.activity-box {
				padding: 16rpx 26rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 24rpx;

				.activity-list {
					display: flex;
					flex-flow: row nowrap;

					.activity-item {
						flex: 1;

						&.is-center {
							margin: 0 2rpx;
						}

						.item-top {
							height: 54rpx;
							background: #3361F0;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							line-height: 54rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							text-align: center;
						}

						.item-center {
							height: 82rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 2rpx solid #D7E0FB;
							margin: 2rpx 0;
							font-size: 28rpx;
							color: #2A3E68;
							text-align: center;
							line-height: 82rpx;

							&.small-text {
								font-size: 20rpx;
							}
						}

						.item-bottom {
							height: 54rpx;
							background: #D3E1FC;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							line-height: 54rpx;
							font-size: 22rpx;
							color: #2A3E68;
							text-align: center;

							&.small-text {
								font-size: 20rpx;
							}
						}
					}
				}

				.activity-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					line-height: 46rpx;
					margin-bottom: 20rpx;
				}
			}

			.scroll-inner {
				padding: 0 32rpx;
			}

			.chart-wrap {
				padding: 36rpx 40rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 24rpx;

				.chart-box {
					width: 100%;
					height: 400rpx;
					margin-top: 24rpx;
				}

				.chart-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #2A3E68;
				}

				.chart-sub-title {
					font-size: 24rpx;
					color: rgba(42, 62, 104, 0.62);
					margin-top: 16rpx;
				}
			}

			.order-box {
				width: 100%;
				padding: 42rpx 0 44rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.details-warp {
					margin-top: 26rpx;
					padding: 0 44rpx;

					.detail-remark {
						margin-top: 16rpx;
						font-size: 20rpx;
						color: #767E91;
						line-height: 44rpx;
					}

					.detail-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 8rpx;
						font-size: 28rpx;
						line-height: 44rpx;

						.item-label {
							color: #2F2F2F;
						}

						.item-value {
							color: #2A3E68;
						}
					}

					.details-title {
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						line-height: 44rpx;
						margin-bottom: 16rpx;
					}

				}

				.line-box {
					margin-top: 24rpx;
					border-top: 4rpx dashed #3361F0;
					position: relative;

					.line-circle {
						position: absolute;
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: #F7F8FA;

						&.left {
							left: -24rpx;
						}

						&.right {
							left: unset;
							right: -24rpx;
						}

					}
				}

				.desc-item {
					font-size: 30rpx;
					color: #000000;
					line-height: 44rpx;
					padding-left: 44rpx;
				}

				.order-title {
					font-weight: bold;
					font-size: 42rpx;
					color: #000000;
					text-align: center;
					line-height: 50rpx;
					margin-bottom: 22rpx;
				}
			}
		}

		.header-wrap {
			width: 100%;
			height: 370rpx;
			position: relative;
			padding-top: var(--status-height-value);
			box-sizing: border-box;

			.navbar-wrap {
				position: relative;
				box-sizing: border-box;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.nav-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.header-mask {
				height: 370rpx;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>